<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Arvato企业微信后台管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome.min.css">
		<style type="text/css">
			.department {
				width: 255px;
				height: 100%;
				float: left;
			}
			
			.weadmin-body {
				margin-left: 255px;
			}
			
			.menuUl {
				margin-left: 20px;
			}
			
			.innerUl {
				position: relative;
			}
			
			.innerUlEdit {
				position: absolute;
				top: 5px;
				right: 60px;
				cursor: pointer;
				display: none;
			}
			
			.innerUl>.menuUl {
				margin-left: 5px;
			}
			
			.menuUl li {
				margin: 10px 0 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.menuUl li span:hover {
				text-decoration: underline;
				cursor: pointer;
			}
			
			.menuUl li i {
				margin-right: 10px;
				top: 0px;
				cursor: pointer;
				color: #161616;
			}
			
			.operate {
				position: fixed;
				left: 0;
				top: 0;
				width: 80px;
				overflow: hidden;
				display: none;
				background: #ffffff;
				border: 1px solid #eee;
				z-index: 99;
				opacity: 0.9;
			}
			
			.operate div {
				height: 30px;
				border-top: 1px solid #eee;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			
			.operate div:hover {
				color: #666666;
				background: #efdbdc;
			}
			
			.operate div:nth-of-type(1) {
				border: 0;
			}
			
			.confirm {
				padding-top: 10px;
				width: 300px;
				height: 200px;
				position: fixed;
				margin: auto;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #EEEEEE;
				display: none;
				z-index: 99;
			}
			
			.confirm p {
				text-align: center;
				font-size: 18px;
			}
			
			.confirm input {
				display: block;
				width: 200px;
				height: 30px;
				border-radius: 5px;
				border: none;
				padding-left: 10px;
				margin: 10px auto;
			}
			
			.confirm span {
				display: block;
				font-size: 16px;
				text-align: center;
				margin: 40px auto;
			}
			
			.confirm button {
				width: 60px;
				height: 30px;
				border-radius: 2px;
				border: none;
				background: #009688;
				margin: 10px 43px;
				color: #FFFFFF;
				cursor: pointer;
			}
			
			.cover {
				width: 100%;
				height: 100%;
				position: fixed;
				background: #000000;
				opacity: 0.5;
				top: 0;
				left: 0;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="operate">
			<div class="rename" onclick="showRename()">重命名</div>
			<div class="remove" onclick="showRemove()">删除</div>
			<div class="addChild" onclick="showAddChild()">新增子部门</div>
			<div class="" onclick="cancelOperate()">取消</div>
		</div>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
		        <a href="">员工管理</a>
		        <a>
		          <cite>员工列表</cite>
		        </a>
		    </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="department">
			<div class="innerUl">
				<i class="innerUlEdit fa fa-pencil-square-o"></i>
			</div>
		</div>
		<div class="weadmin-body">
			<div class="weadmin-block">
				<button id="staff_excel_import_btn_hide" style="display:none" type="button" class="layui-btn"><i class="layui-icon">&#xe67c;</i>批量导入</button>
				<button id="staff_excel_import_btn_click" onclick="importClick()" type="button" class="layui-btn"><i class="layui-icon">&#xe67c;</i>批量导入</button>
				<button style="margin-left:10px;" class="layui-btn" onclick="WeAdminShow('新增员工','./staff-add.html')"><i class="layui-icon"></i>手动添加</button>
				<button class="layui-btn" onclick="syncStaff()"><i class="layui-icon"></i>刷新</button>
				<button class="layui-btn" onclick="exportStaff()"><i class="layui-icon"></i>导出</button>
				<div style="margin-left:10px;" class="layui-inline">
					<input type="text" id="staff_search_keyword" name="keyword" placeholder="姓名/门店号/员工号/职位" autocomplete="off" class="layui-input">
				</div>
				<button class="layui-btn" onclick="staffSearch()" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
				<span class="fr" style="line-height:40px"></span>
			</div>
			<!--  用户表格 -->
			<table class="layui-table" lay-filter="staff_table" id="staff_table" style="margin: 0"></table>
		</div>
		<div class="confirm renameConfirm layui-anim layui-anim-scaleSpring">
			<p>重命名</p>
			<input class="oldName" type="text" placeholder="部门名称" />
			<button class="ensureRename">确定</button>
			<button onclick="cancel()">取消</button>
		</div>
		<div class="confirm removeConfirm layui-anim layui-anim-scaleSpring">
			<span>确定删除此部门？</span>
			<button class="ensureRemove">确定</button>
			<button onclick="cancel()">取消</button>
		</div>
		<div class="confirm addChildConfirm layui-anim layui-anim-scaleSpring">
			<p>新增子部门</p>
			<input class="newName" type="text" placeholder="部门名称" />
			<input class="newCode" type="text" placeholder="部门编码" />
			<button class="ensureAdd">确定</button>
			<button onclick="cancel()">取消</button>
		</div>
		<div class="cover"></div>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script src="../../static/js/admin.js" charset="utf-8"></script>
		<script src="../../publicjs/jquery-1.8.0.min.js" charset="utf-8"></script>
		<script src="../../static/js/proTree.js" charset="utf-8"></script>
		<script src="../../publicjs/smallkingutil.js" charset="utf-8"></script>
		<script>
			$(function() {
				commonUtil.setMaxLength(40);
				$.ajax({
					url: commonUtil.domain() + '/admin/wxwork/department/tree',
					success: function(res) {
						var arr = res.data;
						$(".innerUl").ProTree({
							arr: arr,
							close: true,
							simIcon: "fa fa-list-ol", //单个标题字体图标 不传默认glyphicon-file
							mouIconOpen: "fa fa-bars", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
							mouIconClose: "fa fa-list", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
							callback: function(id, name) {
								var code = "";
								if(id != 1) {
									code = name.split("(")[1].split(")")[0];
								}
								// 刷新表格
								staffTable.refresh({
									departmentCode: code
								});
							}
						});
						$('.innerUl').children(".menuUl").children('li').children(".menuUl").show();
						$('.innerUl').children(".menuUl").children('li').children("i").attr('ischek', true).addClass('fa-bars').removeClass('fa-list');
					}
				})
				var operateId = '';
				var operateCode = '';
				document.addEventListener("contextmenu", function(e) {
					var e = e || window.event;
					e.preventDefault();
				}, false)

				$('.innerUl').on('click', '.menuUl li span', function(e) {
					operateId = $(this).attr('id');
					$('.innerUl').find('.menuUl li span').css('background', '#FFFFFF')
					$('.innerUlEdit').show();
					if(operateId!=1){
						$('.remove').show();
						$('.rename').show();
					}else{
						$('.remove').hide();
						$('.rename').hide();
					}
					$(this).css('background', '#ccc');
					var code = $(this).html().split("(");
					if(code[1]) {
						operateCode = code[1].substr(0, code[1].length - 1);
					}
					console.log(operateCode)
				})

				$('.innerUlEdit').click(function(e) {
					var e = e || window.event;
					var oX = e.clientX + "px";
					var oY = e.clientY + "px";
					$('.operate').css('left', oX);
					$('.operate').css('top', oY);
					$('.operate').css('display', 'block');
				})

				$('.ensureRename').click(function() {
					var name = $('.oldName').val();
					var code = operateCode;
					console.log("operateId", operateId, "name", name, "code", code);
					if($.trim(name) == "") {
						layer.msg(
							'部门名称不能为空哦',
							function() {
								//关闭后的操作
								return null
							}
						);
					} else {
						$.ajax({
							url: commonUtil.domain() + '/admin/wxwork/department/update',
							type: 'post',
							data: {
								id: operateId,
								code: code,
								name: name
							},
							success: function(res) {
								console.log(res)
								if(res.code == 200) {
									location.reload();
								}
							},
							error: function(res) {
								console.log(res)
							},
							complete: function(res) {
								console.log(res)
							}
						})
					}
				})

				$('.ensureAdd').click(function() {
					var name = $('.newName').val();
					var code = $('.newCode').val();
					console.log("operateId", operateId, "name", name, "code", code);
					if($.trim(name) == "" || $.trim(code) == "") {
						layer.msg(
							'部门名称和部门编码不能为空哦',
							function() {
								//关闭后的操作
								return null
							}
						);
					} else {
						$.ajax({
							url: commonUtil.domain() + '/admin/wxwork/department/create',
							type: 'post',
							data: {
								parentid: operateId,
								code: code,
								name: name
							},
							success: function(res) {
								console.log(res)
								if(res.code == 200) {
									location.reload();
								} else if(res.code == 500) {
									layer.msg(
										res.msg,
										function() {
											//关闭后的操作
											return null
										}
									);
								}
							},
							error: function(res) {
								console.log(res)
							},
							complete: function(res) {
								console.log(res)
							}
						})
					}
				})

				$('.ensureRemove').click(function() {
					console.log(operateId);
					$.ajax({
						url: commonUtil.domain() + '/admin/wxwork/department/delete',
						type: 'post',
						data: {
							id: operateId
						},
						success: function(res) {
							console.log(res)
							if(res.code == 200) {
								location.reload();
							}
						}
					})
				})

				$('document').click(function(e) { //点击空白区域菜单消失
					var e = e || window.event;
					var _con = $('.operate'); // 设置目标区域
					if(!_con.is(e.target) && _con.has(e.target).length === 0) {
						$('.operate').hide();
					}
				})

				$('.operate').click(function(e) { //阻止冒泡
					var e = e || window.event;
					e.cancelBubble = true;
					$(this).hide()
				})
			})

			function showRename() {
				$('.cover').show();
				$('.renameConfirm').show();
			}

			function showRemove() {
				$('.cover').show();
				$('.removeConfirm').show();
			}

			function showAddChild() {
				$('.cover').show();
				$('.addChildConfirm').show();
			}

			function cancel() {
				$('.cover').hide();
				$('.confirm').hide();
			}
			
			function cancelOperate(){
				$('.cover').hide();
				$('.operate').hide();
			}
		</script>
		<script>
			layui.use(['upload', 'table'], function() {
				var table = layui.table;
				var upload = layui.upload;
				// layui上传组件
				var uploadInst = upload.render({
					elem: '#staff_excel_import_btn_hide',
					url: commonUtil.domain() + '/admin/wxwork/staff/import',
					accept: 'file',
					field: 'file',
					before: function(res) {
						layer.msg("上传解析中，请稍后。", {
							time: 1000
						});
						layer.load(1, {
							shade: [0.1, '#fff']
						});
					},
					done: function(res) {
						//上传完毕回调
						console.info(res);
						var msg = res.msg;
						if(res.code == 500) {
							if(res.data) {
								var failList = res.data;
								msg += "。请检查Excel中员工号是否重复，姓名，部门，职位等信息是否合法。";
							}
						}
						layer.alert(msg, function() {
							staffTable.refresh();
							layer.closeAll();
						});

					},
					error: function() {
						//请求异常回调
						layer.alert("服务器出错，上传失败。");
					}
				});
				// 加载用户数据表格
				window.staffTable = table.render({
					id: 'staffTable',
					elem: '#staff_table',
					url: commonUtil.domain() + '/admin/wxwork/staff/list', //数据接口
					method: 'post',
					page: true, //开启分页
					request: {
						pageName: 'pageNum', // 分页当前页数发给后台的参数名
						limitName: 'pageSize', // 分页每页多少条发给后台的参数名
						countName: 'total'
					},
					done: function(res) {
						$('.layui-laypage-count').text('共' + res.total + '条')
					},
					cols: [
						[ //表头
							{
								field: 'name',
								title: '姓名',
								width: 80
							}, {
								field: 'staffCode',
								title: '员工号',
								width: 80
							}, {
								field: 'mobile',
								title: '电话',
								width: 120
							}, {
								field: 'position',
								title: '职位',
								width: 180
							}, {
								field: 'positionCode',
								title: '职位编号',
								width: 100
							}, {
								field: 'storeCode',
								title: '门店编号',
								width: 100
							}, {
								field: 'shortName',
								title: '门店简称',
								width: 100
							}, {
								field: 'status',
								title: '状态',
								width: 80,
								templet: '#status'
							}, {
								field: 'visible',
								title: '工作台权限',
								width: 100,
								templet: '#visible'
							},{
								field: 'createTime',
								title: '创建日期',
								width: 110
							}, {
								field: 'updateTime',
								title: '修改日期',
								width: 110
							}, {
								field: 'oper',
								title: '操作',
								width: 100,
								templet: '#oper'
							}
						]
					]
				});
				// 刷新表格
				staffTable.refresh = function(data) {
					staffTable.reload({
						where: data,
						page: {
							curr: 1 // 重新从第 1 页开始
						}
					});
				}
				// 上传提示
				window.importClick = function(res) {
					layer.confirm('员工号重复，不会覆盖原有数据。', function(index) {
						$("#staff_excel_import_btn_hide").click()
					});
				}
				// 搜索按钮
				window.staffSearch = function(res) {
					var keyword = $("#staff_search_keyword").val();
					// 传入关键词 重载表格
					staffTable.refresh({
						keyword: keyword
					});
				}
				// 同步按钮
				window.syncStaff = function(res) {
					layer.confirm('刷新员工的手机，企业微信等信息。同步操作比较耗时，请耐心等待。', function(index) {
						// 删除用户
						var ajaxParam = {
							url: commonUtil.domain() + '/admin/wxwork/staff/snyc'
						}
						ajaxUtil.post(ajaxParam, function(data) {
							layer.alert(data.data, function() {
								staffTable.refresh();
								layer.closeAll();
							});
						});
					});
				}
				// 导出按钮
				window.exportStaff = function(res) {
					location.href = commonUtil.domain() + "/admin/wxwork/staff/export";
					/* layer.open({
						type: 2,
						area: ['500px', '300px'],
						fix: false, //不固定
						maxmin: true,
						shadeClose: true,
						shade: 0.4,
						title: "筛选条件",
						content: './staff-export.html'
					}); */
				}
				// 监听表格点击删除和修改按钮
				table.on('tool(staff_table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; // 获得当前行数据
					var staffId = data.staffId;
					var staffStatus = data.status;
					var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; // 获得当前行 tr 的DOM对象
					if(layEvent === 'update') {
						WeAdminShow('修改用户', './staff-add.html?staffId=' + staffId)
					} else if(layEvent === 'qrcode') {
						// 查看用户二维码
						window.open(data.qrCode);
					} else if(layEvent === 'quit') {
						if(staffStatus == 3) {
							layer.alert("离职失败：用户已经是离职状态");
							return false;
						}
						if(staffStatus == 4){
							layer.alert("离职失败：员工还未激活进入企业微信");
							return false;
						}
						layer.confirm('确认要离职此用户吗？', function(index) {
							// 删除用户
							var ajaxParam = {
								url: commonUtil.domain() + '/admin/wxwork/staff/quit',
								data: {
									staffId: staffId
								}
							}
							ajaxUtil.post(ajaxParam, function(data) {
								if(data.code == 200) {
									layer.alert("离职成功", {
										icon: 6
									}, function() {
										staffTable.refresh();
										layer.closeAll();
									});
								} else {
									layer.alert(data.msg);
								}
							});
						});
					} else if(layEvent === 'delete') {
						layer.confirm('确认要删除此用户吗？此操作属于危险操作，请谨慎操作。', function(index) {
							// 删除用户
							var ajaxParam = {
								url: commonUtil.domain() + '/admin/wxwork/staff/delete',
								data: {
									staffId: staffId
								}
							}
							ajaxUtil.post(ajaxParam, function(data) {
								if(data.code == 200) {
									layer.alert("删除成功", {
										icon: 6
									}, function() {
										staffTable.refresh();
										layer.closeAll();
									});
								} else {
									layer.alert(data.msg);
								}
							});
						});
					}
				});
			});
		</script>
		<script type="text/html" id="qrcode">
			{{# if(d.qrCode != null && d.qrCode != ""){ }}
			<a lay-event="qrcode"><i class="layui-icon">&#xe64a;</i></a>
			{{# } }}
		</script>
		<script type="text/html" id="gender">
			{{# if(d.gender == 1){ }}
			<i style="color:#1296db" class="layui-icon">&#xe662;</i> {{# } else { }}
			<i style="color:#FF9E9E" class="layui-icon">&#xe661;</i> {{# } }}
		</script>
		<script type="text/html" id="oper">
			<a title="修改" lay-event="update"><i class="layui-icon">&#xe642;</i></a>
			<a title="离职" lay-event="quit"><i style="background: url(../../static/images/quit.png); background-size: 100% 100%;display: inline-block; width: 16px; height: 16px;" class="layui-icon"></i></a>
			<a title="删除" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
		</script>
		<script type="text/html" id="status">
			{{# if(d.status == 1){ }}
			<span class="layui-btn layui-btn-normal layui-btn-xs">在职</span> {{# } else if(d.status == 2){ }}
			<span class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">禁用</span> {{# } else if(d.status == 3){ }}
			<span class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">离职</span> {{# } else if(d.status == 4){ }}
			<span class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">未激活</span> {{# } }}
		</script>
		<script type="text/html" id="visible">
			{{# if(d.visible == 1){ }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs">是</span>{{# } else { }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">否</span> {{# } }}		
		</script>
	</body>

</html>